<template>
  <div class="app-container">
    <el-empty v-if="scholarshipApply.length == 0" description="暂无数据"></el-empty>
    <div class="myApply" :class="{'myApplySubsidy': isSubsidy}" v-for="item in scholarshipApply" :key="item.label">
        <template v-if="isScholarship">
            <div class="myApply-left">
                <div class="myApply-left-title">
                    {{item.yearStr}}年
                </div>
                <div class="myApply-left-template">
                    申请表模板：<el-link type="primary" @click.stop="downloadApply(item.fileUrl)">{{item.fileName}}</el-link>
                </div>
            </div>
            <div class="myApply-right">
                <div class="myApply-right-tgpy">
                    通过评优
                </div>
            </div>
        </template>
        <template v-if="isSchoolScholarship">
            <div class="myApply-left">
                <div class="myApply-left-title">
                    {{item.yearStr}}年  {{item.typeName}}
                </div>
                <div class="myApply-left-template">
                    申请表模板：<el-link type="primary" @click.stop="downloadApply(item.applyFileUrl, item.applyFileName)">{{item.applyFileName}}</el-link>
                </div>
            </div>
            <div class="myApply-right">
                <div class="myApply-right-tgpy">
                    通过评优
                </div>
            </div>
        </template>
        <template v-if="isSubsidy">
            <div class="myApply-left">
                <div class="myApply-left-title">
                    {{item.yearStr}}年  {{item.planName}}
                </div>
                <div class="myApply-left-template">
                    申请表模板：<el-link type="primary" @click.stop="downloadApply(item.applyFormUrl, item.applyFormName)" style="margin-right: 20px;">{{item.applyFormName}}</el-link>
                    认定表模板：<el-link type="primary" @click.stop="downloadApply(item.identifyFormUrl, item.identifyFormName)" style="margin-right: 20px;">{{item.identifyFormName}}</el-link>
                    <span v-if="item.applyExamType == '3'">失败原因：{{item.examRemark}}</span>
                </div>
                <div class="myApply-left-title">
                    请下载认定表和申请表的模版，认定表下载自行打印填写之后上交院系，申请表在线申请后提交审核。
                </div>
                <div class="myApply-left-title">
                    申请表的格式要求：字数不小于1000字，四号宋体，行间距1.5
                </div>
            </div>
            <div class="myApply-center">
                <div class="applyType">
                    {{item.applyExamType | applyExamTypeName()}}
                </div>
            </div>
            <div class="myApply-right">
                <div class="myApply-right-tgpy">
                    通过评优
                </div>
                <el-button type="primary" v-if="item.applyExamType == '0' || !item.applyExamType" @click.stop="uploadApplyTable(item)" style="margin-top:10px;" size="mini">上传申请表</el-button>
                <el-button type="primary" v-if="item.applyExamType == '1' || item.applyExamType == '2'" @click.stop="downloadApply(item.applyFileUrl, item.applyFileName)" style="margin-top:10px;" size="mini">下载申请表</el-button>
                <el-button type="primary" v-if="item.applyExamType == '3' || item.applyExamType == '4'"  @click.stop="uploadApplyTable(item)" style="margin-top:10px;" size="mini">重新上传</el-button>
            </div>
        </template>
    </div>
    <UploadFile ref="uploadFileRef" @onSearch="getsMyApply"></UploadFile>
  </div>
</template>

<script>

import { 
    scholarshipMyApply,
    poorStudentMyApply,
    mySchoolScholarshipList
} from "@/api/poorStudent-scholarship/user.js";
import {
    scholarshipTypeArr
  } from "@/views/poorStudent-scholarship/dict.js"
import UploadFile from "@/views/poorStudent-scholarship/plan/modules/uploadFile.vue";
export default {
    name:'myApply',
    components: { 
        UploadFile
    },
    data () {
        return {
            scholarshipApply:[],
            scholarshipTypeArr
        }
    },
    filters: {
        applyExamTypeName(type){
            let _name = "";
            switch(type) {  
                case 0:
                    _name = "未提交"
                    break;
                case 1:
                    _name = "待审核"
                    break;
                case 2:
                    _name = "审核通过"
                    break;
                case 3:
                    _name = "审核失败"
                    break;
                case 4:
                    _name = "审核不通过"
                    break;
                default:
                    _name = ""
                    break;
            }
            return _name
        }
     },

    computed:{
        userType () {
            return this.$route.params && this.$route.params.type
        },
        userInfo() {
            return this.$store.state.user.userInfor
        },
        isSubsidy(){
            return this.userType === 'subsidy'
        },
        isScholarship(){
            return this.scholarshipTypeArr.some((item) => {
                return item.code == this.userType 
            })
        },
        scholarshipType() {
            const scholarshipTypeItem = this.scholarshipTypeArr.find((item) => {
                return item.code == this.userType 
            })
            if (scholarshipTypeItem) {
                return scholarshipTypeItem.typeId
            } else {
                return 0
            }
        },
        isSchoolScholarship(){
            return this.userType === 'schoolScholarship'
        },
    }, 
    created(){
        this.getsMyApply()
    },
    methods:{
        uploadApplyTable (row) {
            this.$refs.uploadFileRef.open("myApply", row)
        },
        downloadApply (url, filename) {
            const link = document.createElement("a");
            const body = document.querySelector("body");
            link.href = url
            link.download = filename;
            link.style.display = "none";
            body.appendChild(link);
            link.click();
            body.removeChild(link);
        },
        getsMyApply(){
            this.scholarshipApply = []
            if (this.isScholarship) {
                scholarshipMyApply({scholarshipType: this.scholarshipType}).then((res)=>{
                    this.scholarshipApply = res.data
                })
            }
            if (this.isSubsidy) {
                if (this.userInfo.studentId) {
                    poorStudentMyApply({
                        studentId: this.userInfo.studentId
                    }).then((res)=>{
                        this.scholarshipApply = res
                    })
                }
            }
            if (this.isSchoolScholarship) {
                mySchoolScholarshipList().then((res)=>{
                    this.scholarshipApply = res.data
                })
            }
        }
    }

}
</script>

<style lang="scss" scoped>
.myApply{
  display: flex;
  background-color: #f8f8f9;
  height: 80px;
  &-left{
    width: calc(100% - 120px);
    padding: 10px 20px;
    &-title{
        height: 30px;
        line-height: 30px;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    &-template{
        height: 30px;
        line-height: 30px;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        .el-link{
            font-size: 12px;
        }
    }
  }
  &-right{
    width: 120px;
    padding: 8px 10px;
    text-align: center;
    &-tgpy{
        width: 100px;
        height: 30px;
        line-height: 27px;
        text-align: center;
        border-color: #4095e5;
        border-width: 3px;
        border-style: solid;
        border-radius: 9px;
        opacity: 0.7;
        & ~ .el-button{
            margin-left: 0px;
            width: 100px;
        }
    }
  }
  &-center{
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    .applyType{
        text-align: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        -webkit-transform: rotate(322deg);
        transform: rotate(322deg);
        border-color: #4095e5;
        border-width: 3px;
        border-style: solid;
        display: flex;
        align-items: center;
        justify-content: center;
    }
  }
  & + .myApply{
    margin-bottom: 10px;
  }
}
.myApplySubsidy{
    height: 140px;
}
</style>